import React from 'react';
import {
    View,
    Text,
    Image,
    Alert,
    TouchableOpacity,
} from 'react-native';
import BackPressComponent from '../../components/BackPressComponent';
import NavigationUtil from '../../navigator/NavigationUtil';
import DataStore from '../../public/dao/DataStore'
import styles from './style/app';//样式
import MenuItem from './MenuItem';

import {connect} from 'react-redux';
import actions from '../../action';
import {system} from'../../public/common';
import {Toast} from '../../components/Toast';
class MyPage extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: this.onBackPress});
        this.state = {
            menuData:[
                {text:'用户注册协议'},
                {text:'信息授权及使用协议'},
            ],
            userDatas:null
        }
    }
    componentDidMount(){
        this._INIT();
    }
    _INIT = ()=>{ // 加载用户数据
        let dataStore = new DataStore();
        dataStore.fetchLocalData('USERDATAS').then((json)=>{
            this.setState({
                userDatas:json.data
            })
        }).catch(()=>{
            this.setState({userDatas:null})
        })
    }
    _outLogin = ()=>{
        Alert.alert(
            '退出',
            '是否退出登录？',
            [
                {text:'取消',onPress:()=>{}},
                {text:'确定',onPress:()=>{
                    let dataStore = new DataStore();
                    dataStore.removeLocaData('USERIDCARD'); //移除身份证号
                    dataStore.removeLocaData('USERDATAS',(err)=>{
                        if(!err){
                            system.isIOS ? Toast.showSuccess('退出成功') : Toast.show('退出成功');
                            this._INIT();
                        }
                    });
                }}
            ]
        )
    }
    _LinkToView = (i)=>{
        NavigationUtil.goPage({naem:"协议",
            url:i==0?'https://market.51bills.cn/reg_protocal.html':'https://market.51bills.cn/info_protocal.html'
        },'MyWebView')
    }
    render() {
        let {menuData,userDatas} = this.state;
        return <View style={styles.container}>
            {system.isFullScreen? <View style={styles.topView}></View> :null}
            <View style={styles.loginTop}>
                <Image style={styles.logoImage} source={require('../../images/my/logo.jpg')}/>
                <View>
                    {userDatas?
                        <View style={{flexDirection:"row"}}>
                            <Text style={styles.text}>手机：{userDatas.mobile}</Text>
                            <TouchableOpacity 
                                onPress={()=>{this._outLogin()}}>
                                <Text style={styles.outLogin}>退出</Text>
                            </TouchableOpacity>
                        </View>
                    :<Text style={styles.text}>你还没有登录啊 ^_^</Text>}
                    {userDatas?
                        <Text  style={styles.textName}>姓名：{userDatas.name}</Text>
                    :<TouchableOpacity 
                        onPress={() => {
                            NavigationUtil.goPage({
                                refresh:()=> {
                                    this._INIT();//传递一个方法返回时调用
                                }
                            },'Login')
                        }}>
                        <Text style={styles.textName}>去登录</Text>
                    </TouchableOpacity>}
                </View>
            </View>
            <View style={styles.itemLooks}>
                <View>
                    <Text style={styles.NumberTxt}>0</Text>
                    <Text style={styles.fontTxt}>我的借款（笔）</Text>
                </View>
                <View>
                    <Text style={styles.NumberTxt}>0</Text>
                    <Text style={styles.fontTxt}>我的记录（条）</Text>
                </View>
            </View>
            <MenuItem menuData={menuData} LinkToView={this._LinkToView}></MenuItem>
            {/* <TouchableOpacity onPress={()=>{ this.props.onThemeChange('blue')}}>
                <Text style={styles.BtnText}>改变底部按钮颜色（blue）</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{ this.props.onThemeChange(color.themeColor)}}>
                <Text style={styles.BtnText}>还原底部按钮颜色</Text>
            </TouchableOpacity> */}
        </View>
    }
}

const mapStateToProps = state =>({});

const mapDispatchToProps = dispatch => ({
    onThemeChange:theme=>dispatch(actions.onThemeChange(theme))
})

export default connect(mapStateToProps,mapDispatchToProps)(MyPage)
